<template>
  <Sheet transprent :round="4" :padding="[0]">
    <view class="flex flex-row" :style="{ width: `${_rpxWidth}rpx` }"
      @click="onNavigateTo('/pages/playList/plaza/index')">
      <Text style="line-height: 32rpx;" :font-size="32" _class="text-weight-b" :label="play?.uiElement?.subTitle.title" />
      <Icon style="padding-left: 8rpx;line-height: 32rpx;" :font-size="22" _class="text-weight-b"
        name="tmicon-angle-right" />
    </view>
    <ScrollX :show-bar="false" :width="686" :height="340">
      <Grid transprent :col="6" :width="1600">
        <GridItem v-for="(creative, index) in play?.creatives" :key="index" :height="340"
          @click.stop="onNavigateTo(`/pages/playList/detail/index?id=${creative.creativeId}`)">
          <image style="width: 240rpx;height: 240rpx;border-radius: 16rpx;margin-top: 12rpx;"
            :src="creative.uiElement.image.imageUrl" />
          <view style="white-space: normal">
            <Text _class="text-overflow-2" _style="padding-top: 16rpx" :font-size="24"
              :label="creative.uiElement.mainTitle.title"></Text>
          </view>
        </GridItem>
      </Grid>
    </ScrollX>
  </Sheet>
</template>
<script setup lang='ts'>
import { PropType } from "vue";
import { onNavigateTo } from "@/utils";
import { systemStore } from "@/stores";
import Sheet from "@/tmui/components/tm-sheet/tm-sheet.vue";
import ScrollX from "@/tmui/components/tm-scrollx/tm-scrollx.vue";
import Grid from "@/tmui/components/tm-grid/tm-grid.vue";
import GridItem from "@/tmui/components/tm-grid-item/tm-grid-item.vue";
import Text from "@/tmui/components/tm-text/tm-text.vue";
import Icon from "@/tmui/components/tm-icon/tm-icon.vue";
import type { HomeBannerItem, HomePageItem } from "@/types"

const props = defineProps({
  play: {
    type: Object as PropType<HomePageItem>,
    default: null
  }
})
const system = systemStore()
const _rpxWidth = uni.$tm.u.torpx(system.systemInfo.windowWidth);

const play = toRef(props, 'play')
</script>
<style lang='scss' scoped></style>